const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  /**
   * 方式一
   * (1) 开启代理服务器，注意这里的服务器是指要告诉代理服务器要和哪个服务器通信，它自己肯定是和浏览器一样的
   * (2) 这种方式无法配置多个代理
   * */ 
  // devServer: {
  //   proxy: 'http://127.0.0.1:8091'
  // }

  /**
   * 方式二
   * (1) 这种方式有以下几种优点：
   *     1.通过加不加前缀 自由选择 走不走代理
   *     2.可以配置多个代理 直接用对象嵌套的方法，刚好也可以通过前缀来区分各个代理
   * (2) 加了/api前缀的代理就将数据转发给target指向的服务器
   * (3) 由于target服务器请求数据的地址是没有api的，因此代理服务器在请求数据时
   *     需要去掉/api，即用pathRewrite重写路径，键是正则表达式形式，值是目标地址
   * (4) changeOrigin指的是是否将请求的host地址变为请求的目标服务器
   *     因为怕可能 请求的目标服务器有作一些限制：即使你是代理服务器只要端口号不同也不把数据给你
   *     因此为true的话直接把host的地址改为请求的目标地址，是一种双重保险
   *     缺省值为true
   * */ 
   devServer: {
    proxy: {
      '/server1': {
        target: 'http://127.0.0.1:8091',
        pathRewrite:{ '^/server1':''},
        ws: true, //用于配置websocket
        changeOrigin: true //用于控制请求头中的host
      },
      '/server2': {
        target: 'http://127.0.0.1:8092',
        pathRewrite:{ '^/server2':''},
        ws: true, //用于配置websocket
        changeOrigin: true //用于控制请求头中的host
      }
    }
  }
})
